<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框的实例</title>
    <!--
    简介:
        用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。
    说明:
        1. 边框属性有下列几种:
            - border-radius
            - box-shadow
            - border-image  //该属性过于花哨, 暂不学习
    -->
    <style>
        .div-border-radius {
            border: 2px solid #a1a1a1;
            /*设置元素内边距, 在这个例子中就是和div内部文字的距离*/
            padding: 100px 40px;
            /*设置背景*/
            background: #ffff00;
            width: 300px;
            /*
            功能:
                设置圆角边框
            说明:
                1. 设置值的个数决定了表示不同:
                    - 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
                    - 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
                    - 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
                    - 一个值： 四个圆角值相同
            */
            border-radius: 25px;
        }

        .div-box-shadow {
            width:300px;
            background-color:yellow;
            /*注意的是: 如果没有设置height属性, padding属性可以自动来调整height*/
            padding: 50px 20px;
            border-radius: 25px;
            /*添加阴影*/
            box-shadow: 10px 10px 5px #888888;
        }

        .image-border-radius {
            margin-top: 50px;
            width:300px;
            padding: 100px 40px;
            border-radius: 25px;
            background: url("../image/timg.jpg");
            /*该属性是用来设置使用图片的那个位置的*/
            background-position: left top;
            /*
            功能:
                该属性使用来在图片很小时设置图片重复
            说明:
                1. 如果要验证该属性, 请将width属性调整为3000px, 然后依次使用no-repeat, repeat, repeat-x观察效果
            */
            background-repeat: repeat;
            box-shadow: 10px 10px 5px #888888;
        }

        .image-border-radius2 {
            margin-top: 50px;
            width:300px;
            padding: 100px 40px;
            border-radius: 25px;
            background: url("../image/timg.jpg");
            /*控制背景图的尺寸*/
            background-size: 100% 100%;
            /*该属性是用来设置使用图片的那个位置的*/
            background-position: left top;
            /*
            功能:
                该属性使用来在图片很小时设置图片重复
            说明:
                1. 如果要验证该属性, 请将width属性调整为3000px, 然后依次使用no-repeat, repeat, repeat-x观察效果
            */
            background-repeat: repeat;
            box-shadow: 10px 10px 5px #888888;
        }

        .speech-bubble {
            width:300px;
            padding: 20px 20px 20px 40px;
            border-radius: 25px;
            border: 1px solid black;
            background-image: url("../image/头像1.jpg");
            background-size: 10% 60%;
            /*
            功能:
                这个值用来控制背景图在哪里显示
            说明:
                1. 取值可以有三种:
                    - content-box: 表示在主体区域
                    - padding-box: 表示在边界区域和主体区域中间
                    - border-box: 表示在边界区域
            */
            background-origin: border-box;
            background-position: left;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div-border-radius">border-radius 属性允许您为元素添加圆角边框！ </div>
<div class="div-box-shadow">box-shadow 属性允许您为元素添加阴影！ </div>
<div class="image-border-radius">设置图片背景的圆角div</div>
<div class="image-border-radius2">设置图片背景的百分比</div>

<div class="speech-bubble">会话气泡生成</div>
</body>
</html>